{% extends "subpage/base.html" %}
{% block styles %}
    <style>
        body {
            background: #ecf0f5;
        }

        .outer-box {
            width: 1200px;
            margin: 0 auto;
        }

        .statistic-item {
            min-height: 400px;
            border: 1px solid #cccccc;
            background: #FFFFFF;
            border-radius: 5px;
        }

        .statistics-list .row:first-child {
            margin-bottom: 30px;
        }

        .statistics-list .row:nth-child(2) {
            padding: 0 12px 0 30px;
        }

        .statistics-list .row:first-child .statistic-item:first-child {
            margin: 0 30px;
        }

        .statistics-list .row:first-child .statistic-item:last-child {
            margin-left: 30px;
        }

        .statistic-item:
        .statistics-list .row:last-child {
            margin-top: 20px;
        }
    </style>
{% endblock %}
{% block scripts %}
    <script type="text/javascript" src="{{ url_for("static",filename="extra/echarts.js") }}"></script>
{% endblock %}
{#{% block table %}#}
{#<div class="page-header">#}
{#	<div class="jumbotron">#}
{#	  <h1>Hello World!</h1>#}
{#	  <p>运维日报工具页面</p>#}
{#	  <br>#}
{#	  <p><a class="btn btn-primary btn-lg" target="_blank" href="https://run.mockplus.cn/5di1OJZJmadhQdmV/index.html?to=A942A3AF-3299-4DF7-9AEC-1FBFBAEBC809" role="button">原型</a></p>#}
{#	</div>#}
{#</div>#}
{#{% endblock table %}#}

{% block daily_report %}
    <div class="statistics-list clearfix">
        <div class="row">
            <div class="col-lg-5 statistic-item">
                <div id="netevent-echart" style="width: 100%;height: 350px"></div>
            </div>
            <div class="col-lg-6 statistic-item">
                <div id="bandWidth-echart" style="width: 100%;height: 350px;">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 statistic-item">
                <div id="eventTotal_echart" style="width: 100%;height: 350px">

                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block content %}
    {{ super() }}
    <script>
        $(function () {
            var bandWidth_chart = echarts.init(document.getElementById("bandWidth-echart")),
                netevent_chart = echarts.init(document.getElementById("netevent-echart")),
                eventTotal_chart = echarts.init(document.getElementById("eventTotal_echart"));
            var option1 = {
                title: {
                    text: '本周带宽变化趋势'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: [
                    {
                        data: ['邮件营销', '联盟广告', '视频广告'],
                        x: "center"
                    }, {
                        data: [, '直接访问', '搜索引擎'],
                        x: "center",
                        y: "3 %"
                    }
                ],
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '邮件营销',
                        type: 'line',
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: '联盟广告',
                        type: 'line',
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: '视频广告',
                        type: 'line',
                        data: [150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                        name: '直接访问',
                        type: 'line',
                        data: [320, 332, 301, 334, 390, 330, 320]
                    },
                    {
                        name: '搜索引擎',
                        type: 'line',
                        data: [820, 932, 901, 934, 1290, 1330, 1320]
                    }
                ]
            };
            var option2 = {
                title: {
                    text: "本月网络安全事件种类比例"
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    x: 'right',
                    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: [
                            {value: 335, name: '直接访问'},
                            {value: 310, name: '邮件营销'},
                            {value: 234, name: '联盟广告'},
                            {value: 135, name: '视频广告'},
                            {value: 1548, name: '搜索引擎'}
                        ]
                    }
                ]
            };
            var option3 = {
                title:{
                    text:"本月三线事件数量趋势"
                },
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '直接访问',
                        type: 'bar',
                        barWidth: '60%',
                        data: [10, 52, 200, 334, 390, 330, 220]
                    }
                ]
            };
            ajaxRequestJson("GET","/dashboard",{
                	bandWidth:1,
                levelThree:1,

            },function () {

            },function () {

            });
            bandWidth_chart.setOption(option1);
            netevent_chart.setOption(option2);
            eventTotal_chart.setOption(option3);
        });
    </script>
{% endblock %}